<html>
  <head>
    <meta charset="UTF-8">
    <style>
      .red {
        color: red;
      }
    </style>
	<script type="text/javascript" src="js/observe.js"></script>
	<script type="text/javascript" src="js/Compile.js"></script>
	<script type="text/javascript" src="js/Watcher.js"></script>
	<script type="text/javascript" src="js/MyVue.js"></script>
  </head>
  <body>
    <div id="demo">
      <h2 v-bind:class="myColor">&#123;&#123; name &#125;&#125;</h2>
      <input :value="age"/>
      <input type="text" name="" v-model="name">
      <button @click="clickOk">Ok</button><br/>
	  <!--<h2 v-bind:class="myColor">{{ total }}</h2>-->
	  <input type="number" v-model="math"/>
	  <input type="number" v-model="englise"/>
	  <input type="number" v-model="huaxue"/>
	  <!--<input type="number" v-model="total"/>-->
	  <input type="number" v-model="avg"/>
    </div>
  </body>
  <script>
	
  var myvm = new MyVue({
    el: "#demo",
    data: {
      name: "hello word",
      myColor: "red",
      age: 11,
	  math:0,
	  englise:0,
	  huaxue:0,
	  set avg(newVal) {
		  this.math = newVal;
		  this.englise = newVal;
		  this.huaxue = newVal;
	  },
	  get total() {
		return new Number(this.math) + new Number(this.englise) + new Number(this.huaxue)
	  }
    },
    methods: {
      clickOk: function() {
		  this.math =  100;
        alert("I am OK");
      }
    }
  });
   myvm.math = 100;
  </script>
</html>
 

